<template>
	<view class="top">
		<img src="/static/背景.png" class="img">
		<view class="cont">
			<view class="big">{{detail.title}}</view>
			<view class="ct1">
				<span>酒店电话：{{detail.phone}}</span>
				<span class="sp1">
					<img src="/static/电话.png" class="img1" alt="">
					联系</span>
			</view>
			<view class="ct2">
				<span>酒店位置：{{detail.address}}</span>
				<span class="sp1" @click="goto(detail.address)">
					<img src="/static/导航.png" class="img1" alt="">
					导航</span>
			</view><strong></strong>
		</view>
	</view>
	<view class="con">
		<view class="big">酒店介绍</view>
		<view :class="{ 'expanded': isExpanded }" ref="contentRef">{{detail.con}}
		</view>
		<view>
			<image :src="detail.imgurl" class="img"></image>
		</view>
		<view class="xiao">
			<button @click="toggleExpand" v-if="!isExpanded">展开全部</button>
			<button @click="toggleExpand" v-else>收起</button>
		</view>
	</view>
	<view class="con1">
		<view class="big1">酒店设施</view>
		<view class="view">
			<span class="type" v-for="i in detail.type">{{i}}</span>
		</view>
	</view>
	<view class="btm">
		<button @click="fx(detail)">查看房型</button>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const detail = ref<any>({});
const isExpanded = ref<boolean>(false);
const loading = ref<boolean>(true);
const toggleExpand=()=> {
	isExpanded.value = !isExpanded.value;
}
const goto =((address:any)=>{
	let plugin = requirePlugin('routePlan');
	let key = 'GAGBZ-ZNIL4-FMKU6-KHRJB-3QCNS-Y2BBI'; // 使用在腾讯位置服务申请的key
	let referer = '宇哥的地图'; // 调用插件的app的名称
	let endPoint = JSON.stringify({ // 终点
	  name: address,
	  latitude: 39.894806,
	  longitude: 116.321592
	});
	uni.navigateTo({
	  url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
	});
})
onLoad((options) => {
  if (options.item) {
    try {
      const itemStr = decodeURIComponent(options.item);
      detail.value = JSON.parse(itemStr);
      loading.value = false;
    } catch (error) {
      console.error('解析数据失败:', error);
    }
  }
});	
const fx = ((item:any)=>{
	const itemStr = encodeURIComponent(JSON.stringify(item))
	uni.navigateTo({
		url:`/pages/detail/detail?item=${itemStr}`
	})
})
</script>

<style scoped lang="scss">
.top{
	box-sizing: border-box;
	position: relative;
	width: 100%;
	height: 280rpx;
	.img{
		width: 100%;
		height: 100%;
	}
	.cont{
		position: absolute;
		width: 100%;
		height: 280rpx;
		line-height: 80rpx;
		top:0px;
		color:white;
		background-color: rgba(51,49,48,0.75);
		padding-left: 20rpx;
		.big{
			font-size: 40rpx;
			font-weight: bold;
		}
		.ct1{
			font-size: 24rpx;
			.sp1{
				float: right;
				padding-right: 50rpx;
				.img1{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		.ct2{
			font-size: 24rpx;
			.sp1{
				float: right;
				padding-right: 50rpx;
				.img1{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
}
.con{
	box-sizing: border-box;
	padding-left: 40rpx;
	padding-right: 40rpx;
	padding-top: 40rpx;
	.img{
		width:100% ;
		padding-top: 20rpx;
	}
	.big{
		font-size: 35rpx;
		font-weight: bold;
	}
	.xiao{
		width: 260rpx;
		margin: auto;
		padding-top: 20rpx;
	}
	view{
		font-size: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2; /* 限制显示的行数 */
		-webkit-box-orient: vertical;
		transition: all 0.3s ease;
	}
	.expanded {
		-webkit-line-clamp: unset; /* 展开时移除行数限制 */
	}
}
.con1{
	padding-left: 40rpx;
	.big1{
		font-size: 35rpx;
		font-weight: bold;
	}
	.view{
		margin-top: 20rpx;
		.type{
			border: 1px solid green;
			color: green;
			text-align: center;
			width: 150rpx;
			margin-right: 20rpx;
			font-size: 28rpx;
			padding: 4rpx;
		}
	}
}
.btm{
	position: fixed;
	width: 100%;
	bottom: 15rpx;
	button{
		background-color: blue;
		color:white;
	}
}
</style>
